<template>
  <div>
    <div class="uploader-list" v-if="fileslists.length != 0">
      <ul>
        <li v-for="(item, index) in fileslists" :key="index">
          <div status="success" class="uploader-file">
            <div class="uploader-file-info">
              <div class="uploader-file-name">
                <i
                  icon="document"
                  :icons="item.name.split('.')[item.name.split('.').length - 1]"
                  class="uploader-file-icon iconfont"
                ></i>
                {{ item.name }}
              </div>
              <div class="uploader-file-meta"></div>
              <div class="uploader-file-actions" style="float: right">
                <span
                  class="el-icon-zoom-in ubtns"
                  v-if="
                    item.path.indexOf('.pdf') >= 0 ||
                    item.path.indexOf('.txt') >= 0 ||
                    item.path.indexOf('.jpg') >= 0 ||
                    item.path.indexOf('.png') >= 0 ||
                    item.path.indexOf('.xlsx') >= 0 ||
                    item.path.indexOf('.xls') >= 0 ||
                    item.path.indexOf('.docx') >= 0 ||
                    item.path.indexOf('.doc') >= 0 ||
                    item.path.indexOf('.pptx') >= 0 ||
                    item.path.indexOf('.ppt') >= 0
                  "
                  @click="preview(item)"
                ></span>
                <span
                  class="el-icon-download ubtns"
                  @click="download(item.path)"
                ></span>
                <span
                  class="el-icon-delete ubtns"
                  @click="remove(index)"
                  v-if="app"
                ></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="nofile" v-else>暂无附件</div>
    <div class="uploader" v-if="app">
      <slot :files="files" :file-list="fileList" :started="started">
        <uploader-unsupport></uploader-unsupport>

        <uploader-list></uploader-list>
        <uploader-drop>
          <!-- <p>Drop files here to upload or</p> -->
          <uploader-btn>选择文件</uploader-btn>
          <p style="margin-top: 10px">
            仅支持下列后缀名的文件 jpg , docx , xlsx , pptx , ppt , png , jpeg ,
            rar , zip , pdf
          </p>
          <!-- <uploader-btn :directory="true">select folder</uploader-btn> -->
        </uploader-drop>
      </slot>
    </div>
  </div>
</template>

<script>
import Uploader from "simple-uploader.js";
import { kebabCase } from "../common/utils";
import UploaderBtn from "./btn.vue";
import UploaderDrop from "./drop.vue";
import UploaderUnsupport from "./unsupport.vue";
// import UploaderList from "./list.vue";
// import UploaderFiles from "./files.vue";
// import UploaderFile from "./file.vue";

const COMPONENT_NAME = "uploader";
const FILE_ADDED_EVENT = "fileAdded";
const FILES_ADDED_EVENT = "filesAdded";
const UPLOAD_START_EVENT = "uploadStart";

export default {
  name: COMPONENT_NAME,
  provide() {
    return {
      uploader: this,
    };
  },
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    fileslists: {
      type: Array,
      default() {
        return {};
      },
    },
    filesurl: {
      type: String,
      default() {
        return "";
      },
    },
    autoStart: {
      type: Boolean,
      default: true,
    },
    app: {
      type: Boolean,
      default: true,
    },
    fileStatusText: {
      type: [Object, Function],
      default() {
        return {
          success: "success",
          error: "error",
          uploading: "uploading",
          paused: "paused",
          waiting: "waiting",
        };
      },
    },
  },
  data() {
    return {
      started: false,
      files: [],
      fileList: [],
    };
  },
  methods: {
    download(index) {
      window.open("http://jg.hljzztech.com/api/index/download?file=" + index);
    },
    preview(index) {
      console.log(index);
      var index1 = index.path.split("/")[4];
      var index2 = index1.split(".")[1];
      if (
        index2 == "xlsx" ||
        index2 == "doc" ||
        index2 == "docx" ||
        index2 == "xls" ||
        index2 == "ppt" ||
        index2 == "pptx"
      ) {
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=http://jg.hljzztech.com/" +
            index.path
        );
      } else {
        window.open(
          "http://jg.hljzztech.com/api/index/preview?files=" + index.path
        );
      }
    },
    remove(item) {
      this.$emit("file-remove", item);
    },
    uploadStart() {
      this.started = true;
    },
    fileAdded(file) {
      this.$emit(kebabCase(FILE_ADDED_EVENT), file);
      if (file.ignored) {
        // is ignored, filter it
        return false;
      }
    },
    filesAdded(files, fileList) {
      console.log(kebabCase(FILES_ADDED_EVENT));

      this.$emit(kebabCase(FILES_ADDED_EVENT), files, fileList);
      if (files.ignored || fileList.ignored) {
        // is ignored, filter it
        return false;
      }
    },
    fileRemoved(file) {
      console.log(file);
      this.files = this.uploader.files;
      this.fileList = this.uploader.fileList;
    },
    filesSubmitted(files, fileList) {
      console.log(files);
      console.log(fileList);
      this.files = this.uploader.files;
      this.fileList = this.uploader.fileList;
      if (this.autoStart) {
        this.uploader.upload();
      }
    },
    allEvent(...args) {
      const name = args[0];
      const EVENTSMAP = {
        [FILE_ADDED_EVENT]: true,
        [FILES_ADDED_EVENT]: true,
        [UPLOAD_START_EVENT]: "uploadStart",
      };
      const handler = EVENTSMAP[name];
      if (handler) {
        if (handler === true) {
          return;
        }
        this[handler].apply(this, args.slice(1));
      }
      args[0] = kebabCase(name);
      this.$emit.apply(this, args);
    },
  },
  created() {
    this.options.initialPaused = !this.autoStart;
    const uploader = new Uploader(this.options);
    this.uploader = uploader;
    this.uploader.fileStatusText = this.fileStatusText;
    uploader.on("catchAll", this.allEvent);
    uploader.on(FILE_ADDED_EVENT, this.fileAdded);
    uploader.on(FILES_ADDED_EVENT, this.filesAdded);
    uploader.on("fileRemoved", this.fileRemoved);
    uploader.on("filesSubmitted", this.filesSubmitted);
  },
  destroyed() {
    const uploader = this.uploader;
    uploader.off("catchAll", this.allEvent);
    uploader.off(FILE_ADDED_EVENT, this.fileAdded);
    uploader.off(FILES_ADDED_EVENT, this.filesAdded);
    uploader.off("fileRemoved", this.fileRemoved);
    uploader.off("filesSubmitted", this.filesSubmitted);
    this.uploader = null;
  },
  components: {
    UploaderBtn,
    UploaderDrop,
    UploaderUnsupport,
    // UploaderList,
    // UploaderFiles,
    // UploaderFile
  },
};
</script>

<style lang="less">
.ubtns {
  display: block !important;
  background: none !important;
  border: 1px solid rgb(221, 221, 221) !important;
  /* padding: 8px; */
  width: 20px !important;
  height: 20px !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: 3px !important;
}
.uploader {
  position: relative;
}
</style>
